<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="test">
    <form action="/xxx">
        <span>用户名: </span>
        <input type="text" v-model="user.name"><br>
    
        <span>密码: </span>
        <input type="password" v-model="user.pwd" ><br>
    
        <span>性别: </span>
        <input type="radio" id="female" :value="0" v-model="user.sex">
        <label for="female">女</label>
        <input type="radio" id="male" :value="1" v-model="user.sex">
        <label for="male">男</label><br>
    
        <span>爱好: </span>
        <input type="checkbox" id="basket" value="basket" v-model="user.hoyyp">
        <label for="basket">篮球</label>
        <input type="checkbox" id="foot" value="foot" v-model="user.hoyyp">
        <label for="foot">足球</label>
        <input type="checkbox" id="pingpang" value="pingpang" v-model="user.hoyyp">
        <label for="pingpang">乒乓</label><br>
    
        <span>城市: </span>
        <select v-model="user.cityID">
          <option value="">未选择</option>
          <option value="1">BJ</option>
          <option value="2">SH</option>
          <option value="3">SZ</option>
          <option value="4">WH</option>
        </select><br>
        
        <span>介绍: </span>
        <textarea rows="10" v-model="user.infor"></textarea><br><br>
    
        <input type="submit" value="注册" @click.prevent="test">
      </form>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: "#test",
      data: {
        user:{
            name:'',
            pwd:'',
            sex:0,
            hoyyp:['basket'],
            cityID:'',
            infor:''
        }
      },
      methods:{
        test(){
            console.log(this.user);
            alert('2222')
        }
      }
    })
  </script>
</body>
</html>